<template>
  <div style="verflow: hidden">
    <div>
      <form action="/">
        <van-search
          v-model="value"
          placeholder="请输入作品关键词"
          @search="onSearch"
        />
      </form>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多作品了~"
      @load="onLoad"
    >
      <!-- <div class="vote_mian">
          <div
            class="vote_list"
            v-for="(item, index) in vote_list"
            :key="index"
          >
            <video controls poster="./../../assets/index_top_bg.png">
              <source :src="`https://${item.video}`" type="video/mp4" />
            </video>
            <div class="vote_list_text">
              <p>编号：{{ item.id }}</p>
              <div class="vote_list_text_introduce">
                <div>学校：{{ item.id ? item.contestantinfo.school : "" }}</div>
                <div>作者：{{ item.id ? item.contestantinfo.author : "" }}</div>
              </div>
            </div>
            <div class="vote_list_btn">
              <div>
                票数：<span
                  ><var>{{ item.count }}</var
                  >票</span
                >
              </div>
              <div class="vote_list_btn_vote" @click="voteAdd(item)">
                <img src="./../../assets/vote_btn.png" alt="" />
              </div>
            </div>
          </div>
        <div class="empty-box" v-if="!vote_list.length && loading !=true">
          <van-empty description="暂无作品" />
        </div>
      </div> -->

      <div class="vote_detail_wrap">
        <div
          class="vote_list__item upload_form"
          v-for="(item, index) in vote_list"
          :key="index"
        >
          <div class="vote_list__item__inner upload_form__inner">
            <div class="vote_list__item__top">
              <span>编号：{{ index + 1}}</span>
              <span class="vote_list__item__top__name">创作者：{{item.id?item.contestantinfo.author:''}}</span>
            </div>
            <div class="vote_list__item__video">
              <video controls poster="./../../assets/index_top_bg_video.png">
                <source :src="`https://${item.video}`" type="video/mp4" />
              </video>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Toast, Empty, List } from "vant";
import axios from "axios";

export default {
  data() {
    return {
      loading: false,
      finished: false,
      value: "",
      vote_list: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  components: {
    Empty,
  },
  methods: {
    onSearch(val) {
      this.params.pageIndex = 1;
      this.vote_list = [];
      this.onLoad();
    },
    onCancel() {
      Toast("取消");
    },
    voteAdd(item) {
      this.http
        .post("/home/vote", {
          id: "" + item.id,
        })
        .then((res) => {
          item.count++;
          Toast("投票成功");
        })
        .catch((err) => {
          console.log(err);
          console.log(Toast);
          Toast(err.msg);
        });
    },
    onLoad() {
      let { pageIndex, pageSize } = this.params;
      this.loading = true;
      this.http
        .get("/home/works", {
          pageIndex,
          pageSize,
          key: this.value,
        })
        .then((res) => {
          // 加载状态结束
          this.loading = false;
          let _list = res.data.rows;
          this.vote_list = [...this.vote_list, ..._list];
          let totalPage = Math.ceil(res.data.count / pageSize);
          if (totalPage === 0 || +totalPage === pageIndex) {
            this.finished = true;
          } else if (pageIndex < +totalPage) {
            this.params.pageIndex = pageIndex + 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    // this.http.get('/home/works', {
    //     'pageIndex': 1,
    //     'pageSize': 10
    // }).then(res => {
    //   console.log(res);
    //   this.vote_list = res.data;
    // }).catch(err => {
    //     console.log(err);
    // })
  },
};
</script>

<style>
.van-field__control::-webkit-input-placeholder {
      color: #f6da91;
    }
    .van-field__control::-moz-input-placeholder {
      color: #f6da91;
    }
    .van-field__control::-ms-input-placeholder {
      color: #f6da91;
    }
    .van-loading,.van-loading__text {
      color: #f6da91;
    }
    .van-list__finished-text{
      color: #f6da91;
    }
    .van-icon-search::before{
        color: #f6da91;
    }
</style>

<style scoped>

.vote_detail_wrap{
  margin:0 3vw 0;
  min-height: calc(100vh - 480px);
}

.vote_mian {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  padding: 0 3vw;
  margin: 5px 0;
}
.vote_list {
  flex: 0 1 48%;
  border-radius: 15px;
  background-color: white;
  height: 52vw;
  max-height: 230px;
  max-width: 210px;
  margin: 10px 0;
  box-shadow: 2px 2px 7px 0px #ccc;
}
.vote_list img {
  width: 100%;
}
.vote_list video {
  width: 100%;
  height: 25vw;
  border-radius: 10px 10px 0 0;
}
.vote_list_text {
  margin: 3px 3vw 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5e5e5;
}
.vote_list_text p {
  margin: 4px 0;
  font-size: 14px;
  color: #333;
  text-align: left;
}
.vote_list_text_introduce {
  font-size: 12px;
  text-align: left;
  color: #939393;
}
.vote_list_btn {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  padding: 0px 2vw;
  height: 40px;
  font-size: 12px;
}
.vote_list_btn span {
  color: #17a67d;
}
.vote_list_btn var {
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
}
.vote_list_btn_vote {
  background-color: #17a67d;
  color: white;
  width: 60px;
  height: 22px;
  border-radius: 10px;
  line-height: 22px;
  font-size: 14px;
}
.van-search {
  background: none;
  color: #f6da91;
}
.van-search__content {
  border-radius: 20px;
  background: #9b1e08;
  border: 1px solid #e4aa70;
}
.van-icon-search {
  color: #f6da91;
}
.van-field__control {
  color: #f6da91;
}
.vide_wrap {
  border-radius: 5px;
  background: white;
  margin: 0 4vw;
  padding: 20px 3vw;
}
/* .video_title_wrap {
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
}
.video_title_wrap .c38866e {
  border-bottom: 1px solid #38866e;
} */
.video_div {
  padding: 20px 0;
  border-radius: 5px;
  margin: 13px 0 25px;
  background-color: #000;
}
.video_div > * {
  margin: auto;
  height: 100%;
  width: 100%;
}
.video_title_wrap span {
  font-size: 14px;
  color: #17a57d;
  line-height: 26px;
  display: inline-block;
  margin-left: 10px;
}
.video_img {
  width: 13px;
  height: 10px;
}
.empty-box {
  margin: auto;
}
.upload_form{
    background: #d19f65;
    padding:7px 2px;
    border-radius: 10px;

}
.upload_form__inner{
    background: #a01e08;
    border-radius: 10px;
    padding:20px;
}
.vote_list__item{
  margin-bottom:10px;
}
.vote_list__item__top{
  background: #991e09;
  border:1px solid #dea66b;
  border-radius: 20px;
  padding:5px 20px;
  font-weight: bold;
  font-size:15px;
  text-align: left;
  color:#f6da91;
}
.vote_list__item__top__name{
  margin-left:10px;
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.vote_list__item__video{
   border-radius: 10px;
  /* background-color: #000; */
  margin-top:10px;
  width:100%;
}
video{
  width:100%;
  background-color: #000;
   border-radius: 10px;
   height:100%;
   object-fit:fill; 
}

</style>
